<template>
    <div class="home">
        <h2>pinia中的count:{{ counterStore.count }}</h2>
        <h2>解构:{{ count }}</h2>
        <h2>doubleCount:{{ counterStore.doubleCount }}</h2>
        <h2>doubleCountAdd:{{ counterStore.doubleCountAdd }}</h2>
        <h2>friendMessage:{{ counterStore.friendMessage(1) }}</h2>
        <h2>useUser中的name-count:{{ counterStore.getUseName }}</h2>
        <button @click="incrementcount">count++</button>
        <action></action>
    </div>
</template>
<script setup>
import action from "@/views/action.vue"
import useCounter from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { toRefs } from "vue"

const counterStore = useCounter()
// 用toRefs或者storeToRefs作包裹进行解构 否则直接解构会失去响应式
// const { count } = toRefs(counterStore) 
const { count } = storeToRefs(counterStore)
function incrementcount() {
    counterStore.count++
}
</script>
<style scoped lang="less"></style>